<template>
  <el-card :body-style="{ padding: '0px' }">
    <el-table :data="form" style="width: 100%">
      <el-table-column label="商品图片" width="180">
        <template #default="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.img_md" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" width="auto" />
      <el-table-column prop="marketPrice" label="价格" sortable width="auto"  />
      <el-table-column prop="inventory" label="库存" sortable width="auto" />
      <el-table-column prop="create_time" label="日期" width="auto" />
      <el-table-column label="操作" width="auto">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row.id)">Edit</el-button>
          <el-button size="small" type="danger" @click="dialogDelete(scope.row.id)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-footer>
      <div class="demo-pagination-block">
        <el-pagination v-model:currentPage="currentPage" background  v-model:page-size="pageSize" :page-sizes="[4, 8, 16, all]"
          :disabled="disabled" layout=", prev, pager, next,sizes, jumper" :total="all" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-footer>
  </el-card>
  <el-dialog v-model="dialogVisible" title="删除货物" width="30%" :before-close="handleClose">
    <span>确认要删除吗？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleDelete">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import goods from '@/api/goods';
import { useRouter } from 'vue-router';
//分页器
const currentPage = ref(1)
const pageSize = ref(4)
const disabled = ref(false)
let page = ref(4);
let index = ref(1);
let all = ref();
const handleSizeChange = async (val) => {
  page.value = val;
  loadList(page.value * 1, index.value * 1)
}
const handleCurrentChange = (val) => {
  index.value = val;
  loadList(page.value * 1, index.value * 1);
}

let form = ref([]);
let loadList = async (page = 4, index = 1) => {
  let { status, msg, data: cargo, total } = await goods.list({ pageSize: page, pageIndex: index });
  if (status) {
    all.value = total
    form.value = [];
    for (let i = 0; i < cargo.length; i++) {
      let { status, msg, data: detail } = await goods.detail({ id: cargo[i].id });
      form.value.push(detail);
    }
  }
}
loadList();
let router = useRouter()
//编辑
let handleEdit = (id) => {
  router.push(`/goods/edit/${id}`)
}
//删除
let dialogVisible = ref(false);
let dialogId = ref();
let dialogDelete = (id) => {
  dialogId.value = id;
  dialogVisible.value = true;
}
let handleDelete = async () => {
  let { status, msg } = await goods.remove(dialogId.value);
  if (status) {
    dialogVisible.value = false;
    ElMessage.success(msg);
  }
}
</script>
  
<style scoped>
.el-card {
  /* padding-bottom: 0; */
  border: 2px solid rgb(222, 222, 222);
  border-radius: 5px;
}

.demo-pagination-block {
  width: 600px;
  margin: 10px auto;
  padding: 5px;
}
</style>
  